<!-- pages/login/components/mobile.vue -->
<script setup>
  import { getCodeApi, loginCodeApi } from '@/apis/user'
  import { useUserStore } from '@/sotre/user'
  import { ref } from 'vue'

  // 1. 定义状态变量显示倒计时
  const showCountDown = ref(false)

  // 2. 定义表单数据 -用以校验 - 绑定给uni-forms, key绑定给uni-forms-items的name属性
  const formData = ref({
    mobile: '13230000088',
    code: '',
  })
  // 3. 定义校验规则 - 一般使用正则表达式 - 绑定给uni-forms
  const formRules = {
    mobile: {
      rules: [
        { required: true, errorMessage: '请填写手机号码' },
        { pattern: '^1\\d{10}$', errorMessage: '手机号码格式不正确' },
      ],
    },
    code: {
      rules: [
        { required: true, errorMessage: '请输入验证码' },
        { pattern: '^\\d{6}$', errorMessage: '验证码格式不正确' },
      ],
    },
  }
  // 4. 定义表单校验数据- 绑定给uni-forms的ref属性
  const form = ref()

  // 5. 点击获取验证码执行
  const getCode = async () => {
    try {
      // 1. 获取校验结果
      // validate - 对整个表单进行校验
      // validateFielld - 部分表单进行校验
      const res = await form.value.validateField(['mobile'])

      // 2. 开启倒计时
      showCountDown.value = true

      // 3. 调接口获取验证码
      const codeRes = await getCodeApi({
        mobile: formData.value.mobile,
        type: 'login',
      })
      uni.showToast({
        title: codeRes.code,
      })
      // 4. 绑定给表单数据
      formData.value.code = codeRes.code
    } catch (e) {}
  }

  // 6. 定义是否同意协议状态变量
  const isArgee = ref(false)

  // 8. 获取pinia中的数据
  const user = useUserStore()
  // 7. 点击登录 - 提交表单数据事件
  const submitForm = async () => {
    // 1. 先校验是否同意用户协议
    if (!isArgee.value) {
      uni.showToast({
        title: '请同意用户协议',
        icon: 'error',
      })
      return
    }
    try {
      // 2. 校验表单格式
      await form.value.validate()
      // 3. 发送请求登录并获取用户信息
      const res = await loginCodeApi(formData.value)
      // 4. 存储token,Id到pinia
      user.token = res.token
      user.userId = res.id
      console.log(user.token, user.userId)
      // 5.跳转至我的页面
      uni.showToast({
        title: '登录成功',
      })
      uni.switchTab({
        url: '/pages/my/index',
      })
    } catch (error) {}
  }
</script>

<template>
  <uni-forms class="login-form" ref="form" :model="formData" :rules="formRules">
    <uni-forms-item name="mobile">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入手机号"
        placeholder-style="color: #C3C3C5"
        v-model="formData.mobile"
      />
    </uni-forms-item>
    <uni-forms-item name="code">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入验证码"
        placeholder-style="color: #C3C3C5"
        v-model="formData.code"
      />
      <!-- 未显示倒计时组件 -->
      <text v-if="showCountDown === false" class="text-button" @click="getCode">获取验证码</text>
      <view v-if="showCountDown === true" class="text-button">
        <!-- 1. 倒计时组件 -->
        <uni-countdown
          @timeup="showCountDown = false"
          :showDay="false"
          :showHour="false"
          :showMinute="false"
          :second="59"
        />
        <!-- 2. 提示的文本 -->
        秒后重新发送
      </view>
    </uni-forms-item>

    <view class="agreement">
      <!-- 单选框 -->
      <radio :checked="isArgee" color="#16C2A3" @click="isArgee = !isArgee" />
      我已同意
      <text class="link">用户协议</text>
      及
      <text class="link">隐私协议</text>
    </view>

    <button class="uni-button" @click="submitForm">登 录</button>
  </uni-forms>
</template>

<script>
  export default {
    options: {
      styleIsolation: 'shared',
    },
  }
</script>

<style lang="scss">
  @import './styles.scss';
</style>
